const Main = () => {
    return (
        <div>
            <div>
                <div style={{marginTop: '10px'}}>
                    <span style={{fontSize: '20px', fontWeight: 'bold', color: '#00CCCC'}}>
                        GengzpMq 消息队列
                    </span>
                </div>
                <div style={{marginTop: '10px'}}>
                    <span
                        style={{color: 'blue'}}>一款基于 SpringBoot、Mysql、Redis 的轻量级消息队列中间件<span></span></span>
                </div>
            </div>

            <div style={{marginTop: '10px'}}>
                <div style={{display: 'flex'}}>
                    <div style={{fontWeight: 'bolder'}}>版本信息：</div>
                    <div>1.1.0</div>
                </div>
                <div style={{display: 'flex', marginTop: '10px'}}>
                    <div style={{fontWeight: 'bolder'}}>更新公告：</div>
                    <div style={{width: '60vw', overflowWrap: 'break-word'}}>
                        1. 修复已知bug<br/>
                        2. 支持通过 MqMessageUtils.sendMessageOneWay 方法发送消息到mq<br/>
                        3. 支持实时查看所有消费者实例的监听以及在线情况
                    </div>
                </div>
            </div>

            <div style={{marginTop: '40px'}}>
                <div>
                    <span style={{
                        fontSize: '20px',
                        fontWeight: 'bold',
                        color: '#0080FF'
                    }}>
                        架构介绍
                    </span>
                </div>

                <div style={{marginTop: '10px'}}>
                    <div style={{color: 'blue', fontSize: '16px'}}>
                        一、gengzp-mq-server 控制服务端
                    </div>
                    <div style={{marginTop: '10px'}}>
                        <span>1. 后端由</span>
                        <span style={{color: 'red'}}> SpringBoot </span>
                        <span>构建, 对外提供 Restful 接口用于监听、消费以及确认消息队列中的消息</span>
                    </div>
                    <div style={{marginTop: '10px'}}>
                        <span>2. 前端由</span>
                        <span style={{color: '#9933FF'}}> React </span>
                        <span>构建, 提供</span>
                        <span> 仪表盘数据监控, </span>
                        <span> 主题Topic管理, </span>
                        <span> 消息Message管理, </span>
                        <span> 消费者Consumer管理 </span>
                        <span>功能</span>
                    </div>
                    <div style={{marginTop: '10px'}}>
                        <span>3. 服务端提供了核心的接口用于发送、订阅或确认消息, 且内置了定时任务清理堆积的消息, 以提高性能</span>
                    </div>
                </div>
            </div>

            <div style={{marginTop: '10px'}}>
                <div style={{color: '#FF007F', fontSize: '16px'}}>
                    二、gengzp-mq-client 业务服务引入客户端
                </div>
                <div style={{marginTop: '10px'}}>
                    <span>1. 提供</span>
                    <span style={{color: '#FF8000'}}> @MqMessageListener </span>
                    <span>注解, 用于订阅主题监听消息队列中的消息</span>
                </div>
                <div style={{marginTop: '10px'}}>
                    <span>2. 提供</span>
                    <span style={{color: '#009999'}}> MqMessageListenerInterface </span>
                    <span>接口, 使用消费者订阅主题的类必须实现该接口, 内部自行实现消息消费逻辑</span>
                </div>
                <div style={{marginTop: '10px'}}>
                    <span>3. 提供</span>
                    <span style={{color: '#00CC00'}}> MqMessageUtils </span>
                    <span>工具类, 内部提供了封装好的方法用于发送消息到队列</span>
                </div>
            </div>

            <div style={{marginTop: '40px'}}>
                <div>
                    <span style={{
                        fontSize: '20px',
                        fontWeight: 'bold',
                        color: '#FF007F'
                    }}>
                        本地调试方法
                    </span>
                </div>
                <div style={{marginTop: '10px'}}>
                    <span>浏览器中, 通过</span>
                    <span style={{color: '#6600CC'}}> F12 </span>
                    <span>进入控制台, 进入</span>
                    <span style={{color: '#FF0000'}}> Application -> Cookies </span>
                    <span>页面,手动添加一行键值对,</span>
                    <span style={{color: '#CC00CC'}}> key：BACK_ROUTE，</span>
                    <span style={{color: '#CC00CC'}}> value：LOCALHOST </span>
                    <span>保存后, 当前页面的所有请求都会路由到本地</span>
                </div>
            </div>

            <div style={{marginTop: '40px'}}>
                <div>
                    <span style={{
                        fontSize: '20px',
                        fontWeight: 'bold',
                        color: '#CC00CC'
                    }}>
                        快速使用方法
                    </span>
                </div>
                <div style={{marginTop: '10px'}}>
                    <span>1. 将项目引入自己的工程, 调试好</span>
                    <span style={{color: 'blue'}}> pom </span>
                    <span>依赖关系</span>
                </div>
                <div style={{marginTop: '10px'}}>
                    <span>2. 在自己的服务器上启动服务端项目</span>
                </div>
                <div style={{marginTop: '10px'}}>
                    <span>3. 在自己的业务程序中, 通过yaml文件配置好服务端的信息：</span>
                    <span style={{color: '#6600CC'}}> gengzp-mq.address.http://xxxx:8765 </span>
                </div>
            </div>

        </div>
    )
}

export default Main;